<template>
	<a-modal :title="dialogType == 'add' ? '新增' : '详情'" :width="1200" :visible="visible" :maskClosable="false"
		:confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel">
		<a-spin :spinning="formLoading">
			<a-form :form="form">
				<a-form-item label="选择物料" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<div @click="toSelect">
						<a-input v-decorator="['materialId', { rules: [{ required: true, message: '请选择' }] }]" placeholder="请选择"
							v-show="false" />
						<div class="inputDiv">{{ selectedObj.materialName || '请选择物料' }}</div>
					</div>
				</a-form-item>
				<a-form-item label="物料图片" :labelCol="labelCol" v-if="selectedObj.materialName" :wrapperCol="wrapperCol">
					<fc-upload :file-list="fileList" disabled :maxFileLength="fileList.length"
						v-decorator="['image']" />
					<!-- <upload-image-more v-decorator="['image', {rules: [{required: true, message: '请选择'}]}]"/> -->
					<!-- <a-input v-show="false" :disabled="false" placeholder="请上传图片"
						v-decorator="['image']" />
					 -->
					<!-- :handle-file-list-string-change="handleFileListStringChange" -->
					<!-- <CropperUpload
              :file-list="fileList"
              @fcsuccess="fcsuccess"
              avatarText=""
            /> -->
				</a-form-item>
				<a-form-item label="采购单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input v-decorator="['orderNumber', { rules: [{ required: route_path == '1473944069297156097' ? false : true, message: '请输入' }] }]" placeholder="请输入" />
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数量">
					<a-input-number placeholder="请输入" style="width: 100%" v-decorator="['num', {
						initialValue: undefined,
						rules: [{ required: true, message: '请输入' }]
					}]" :min="1" :max="9999999" :precision="0" />
				</a-form-item>
				<!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="采购价">
					<a-input-number placeholder="请输入" style="width: 100%" v-decorator="['num', {
						rules: [{ required: true, message: '请输入' }]
					}]" :min="1" :precision="0" />
				</a-form-item> -->
				<!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="退回时间">
					<a-date-picker  />
				</a-form-item> -->
				<!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="确认扣款时间">
					<a-date-picker  />
				</a-form-item> -->
				<!--  -->
				<!-- 22--{{ form.getFieldValue('image') }} <br>
				fileList--{{ fileList }} -->

				<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
					<a-textarea :rows="4" placeholder="请输入备注" v-decorator="['remark']"></a-textarea>
				</a-form-item>

			</a-form>

		</a-spin>
		<selectMaterial ref="selectMaterialRef" @selected="selected" />
	</a-modal>
</template>

<script>
import {
	add,
	handle, //处理（物料退回）
	confirmShipment, //确认发货、扣款
	confirmWarehousing,  //确认入库
} from '@/api/modular/main/badPool'
import {getUrlParam} from '@/utils/util'
import selectMaterial from './selectMaterial.vue'
import FcUpload from '@/components/FCUpload/FcUpload'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'

export default {
	components: {
		selectMaterial,
		FcUpload
	},
	props: ['materialType'],
	data() {
		return {
			dialogType: '',
			fileList: [],
			selectedObj: {},
			wuImage: "",
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			orgTree: [],
			visible: false,
			confirmLoading: false,
			isPackaging: false,
			needDeleteFileUid: null,
			formLoading: false,
			form: this.$form.createForm(this),
			image: '',
			orgTypes: [],
			test: '',

			coverUrl: "",
			route_path:'',
		}
	},
	created(){
		this.route_path = getUrlParam(this.$route.path).materialType
		console.log("route_path",this.route_path);		
	},
	methods: {
		// 初始化方法
		init(dialogType, record) {
			this.dialogType = dialogType
			this.visible = true
			this.selectedObj = {}
			this.$nextTick(() => {
				// 编辑和详情需要回显
				if (dialogType != 'add') {
					this.form.setFieldsValue(record)
					const token = Vue.ls.get(ACCESS_TOKEN)
					this.fileList = record.image.split(',').map(fileID => {
						return {
							uid: fileID,
							name: fileID,
							status: 'done',
							url: `${this.$store.state.baseUrl}/sysFileInfo/preview?id=${fileID}`,
							thumbUrl: `${this.$store.state.baseUrl}/sysFileInfo/preview?id=${fileID}`,
							fileID: fileID
						}
					})
				}
			})
		},
		fcsuccess(url) {
			this.form.setFieldsValue({ image: url })
		},
		toSelect() {
			this.$refs.selectMaterialRef.init(this.materialType)
		},
		handleFileListStringChange(fileListString) {
			console.log('222222', fileListString)
			this.form.setFieldsValue({ image: fileListString })
		},
		selected(row) {
			this.selectedObj = {
				materialId: row.materialId,
				materialName: row.materialName,
			}
			this.wuImage = row.image;
			// this.form.setFieldsValue({ image: row.image })
			this.form.setFieldsValue({
				materialId: row.materialId,
			})
			this.$nextTick(() => {
				// 编辑和详情需要回显
				// if (dialogType != 'add') {					
				const token = Vue.ls.get(ACCESS_TOKEN)
				this.fileList = row.image.split(',').map(fileID => {
					return {
						uid: fileID,
						name: fileID,
						status: 'done',
						url: `${this.$store.state.baseUrl}/sysFileInfo/preview?id=${fileID}`,
						thumbUrl: `${this.$store.state.baseUrl}/sysFileInfo/preview?id=${fileID}`,
						fileID: fileID
					}
				})
				this.form.setFieldsValue({ image: row.image })
				// }
			})
		},
		handleSubmit() {

			let text = this.dialogType == 'edit' ? '编辑' : '新增'
			const { form: { validateFields } } = this
			// this.confirmLoading = true
			validateFields((errors, values) => {
				// console.log(values);
				// return
				if (!errors) {
					add({ ...values, materialType: this.materialType }).then((res) => {
						if (res.success) {
							this.$message.success(`${text}成功`)
							this.visible = false
							this.confirmLoading = false
							this.$emit('ok', values)
							this.form.resetFields()
							this.fileList = []
							this.selectedObj = {}
						} else {
							this.$message.error(`${text}失败` + res.message)
						}
					}).finally((res) => {
						this.confirmLoading = false
					})
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.form.resetFields()
			this.fileList = []
			this.selectedObj = {}
			this.visible = false
		},
	}
}
</script>

<style>
.inputDiv {
	width: 100%;
	line-height: 32px;
	cursor: pointer;
	background: #eee;
	border: 1px solid #bbb;
	padding-left: 10px;
}
</style>
